<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- 搜索框 -->
      <el-form :inline="true">
        <el-form-item label="标签名称" prop="tagname">
          <el-input
            size="small"
            v-model="queryData.tagname"
            placeholder="请输入标签名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            class="blueBtn"
            @click="searchTag"
            >搜索</el-button
          >
          <el-button size="small" icon="el-icon-refresh" @click="resetTag"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 新增、导出、右侧按钮 -->
      <el-row :gutter="20" type="flex" justify="space-between">
        <!-- 新增、导出按钮 -->
        <div class="btnBox">
          <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-plus"
            @click="addRow"
            >新增</el-button
          >
          <el-button
            type="warning"
            plain
            size="mini"
            icon="
         el-icon-download"
            >导出</el-button
          >
        </div>
        <!-- 右侧图标 -->
        <RightIcon />
      </el-row>
      <br />

      <!-- 表格区域 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="#" width="50"> </el-table-column>
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column prop="tagname" label="标签名称"> </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="geetTagInfo(row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delRow(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br />

      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page.sync="queryData.page"
          :page-size="queryData.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryData.total"
          :page-sizes="[10, 30, 50, 100]"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- dialog 弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="isShow"
      width="40%"
      @close="closeHandler"
    >
      <el-form
        :model="queryData"
        ref="form"
        :rules="formRules"
        label-width="85px"
        :inline="false"
        size="small"
      >
        <el-form-item label="标签名称" prop="tagname">
          <el-input
            style="width: 500px"
            v-model="queryData.tagname"
            placeholder="请输入标签名称"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button size="small" @click="isShow = false">取消</el-button>
          <el-button size="small" type="primary" @click="addTag"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import RightIcon from "@/components/RightIcon";
import { getAllTagApi } from "@/api/cate";
import { addTagApi, delTagApi, editTagApi, getTagInfoApi } from "@/api/tag";
export default {
  components: { RightIcon, Pagination },
  data() {
    return {
      tableData: [],
      isShow: false,
      queryData: {
        page: 1,
        limit: 10,
        total: 0,
        tagname: "",
      },
      formRules: {
        tagname: [
          { required: true, message: "请输入标签名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getAllTag();
  },
  computed: {
    title() {
      return this.queryData.id ? "修改标签" : "添加标签";
    },
  },
  methods: {
    // 获取标签页面信息
    async getAllTag() {
      let res = await getAllTagApi(this.queryData);
      // console.log(res);
      this.tableData = res.data;
      // 赋值操作
      this.queryData.total = res.count;
    },
    // 搜索功能
    searchTag() {
      this.queryData.page = 1;
      this.getAllTag();
    },
    // 重置功能
    resetTag() {
      // 清空表单
      this.queryData = {
        page: 1,
        limit: 10,
        catename: "",
      };
      // 重新获取页面
      this.getAllTag();
    },

    // 页面切换事件
    currentChange(val) {
      // console.log(val);
      this.queryData.page = val;
      this.getAllTag();
    },

    // 条数变化
    sizeChange(val) {
      this.queryData.limit = val;
      this.getAllTag();
    },

    addRow() {
      this.isShow = true;
    },

    // 添加功能
    async addTag() {
      try {
        // 1. 表单校验
        this.$refs.form.validate();
        // 2. 发起网络请求
        const { tagname, id } = this.queryData;
        this.queryData.id
          ? await editTagApi({ tagname, id })
          : await addTagApi({ tagname });
        // 3. 提示成功
        this.$message.success(this.queryData.id ? "修改成功" : "添加成功");
        // 4. 关闭弹窗
        this.isShow = false;
        // 5. 重新拉取列表
        this.getAllTag();
      } catch (error) {
        console.log(error);
      }
    },

    // 关闭弹窗事件
    closeHandler() {
      // 清空表单
      this.queryData = {
        page: 1,
        limit: 10,
        tagname: "",
      };
      // 移除校验
      this.$refs.form.clearValidate();
    },

    // 删除事件
    async delRow(id) {
      // console.log(id);
      // 1. 提示
      await this.$confirm("确定要删除么？");
      // 2. 发起网络请求
      await delTagApi(id);
      // 3. 提示删除成功
      this.$message.success("删除成功");
      // 4. 边缘处理
      if (this.queryData.page > 1 && this.tableData.length === 1) {
        this.queryData.page--;
      }
      // 5. 更新列表
      this.getAllTag();
    },
    // 获取单个标签信息
    async geetTagInfo(id) {
      // 1. 获取信息
      let res = await getTagInfoApi(id);
      // console.log(res);
      // 2. 赋值操作
      this.queryData = res;
      // 3. 打开弹窗
      this.isShow = true;
    },
  },
};
</script>

<style scoped>
/* 搜索按钮颜色样式 */
.blueBtn {
  background-color: #409eff;
  border: none;
}
.btnBox {
  margin-left: 10px;
}
.right-icon {
  margin-right: 10px;
}
/* 分页器在行末 */
.pagination {
  display: flex;
  flex-direction: row-reverse;
}
</style>